"use client";

import Image from "next/image";
import { useOrganization, useOrganizationList } from "@clerk/nextjs";
import { cn } from "@/lib/utils";
import { Hint } from "@/components/hint";

interface ItemProps {
  id: string;
  name: string;
  imageUrl: string;
}

/**
 * @property 组织列表每一项组件
 * @param {string} id - 组织的 id
 * @param {string} name - 组织的名称
 * @param {string} imageUrl - 头像的链接
 */

const Item = ({ id, name, imageUrl }: ItemProps) => {
  const { organization } = useOrganization();
  // setActive 设置某个组织为激活状态
  const { setActive } = useOrganizationList({
    userMemberships: true,
  });

  const isActive = organization?.id === id;

  const onClick = () => {
    if (!setActive) return null;
    setActive({ organization: id });
  };

  return (
    <div className="aspect-square relative">
      <Hint label={name} side="right" sideOffset={18} align="start">
        <Image
          fill={true}
          src={imageUrl}
          alt={name}
          onClick={onClick}
          className={cn(
            "rounded-md cursor-pointer opacity-75 hover:opacity-100 transition",
            isActive && "opacity-100"
          )}
          sizes="auto atuo"
        />
      </Hint>
    </div>
  );
};

export default Item;
